<template>
  <a-drawer
    wrapClassName="fullscreen"
    height="100%"
    placement="bottom"
    :closable="false"
    @close="handleCancel"
    :visible="editVisible" >
    <one v-if="mIdx==0" ref="one" :data="data" />
    <two v-else-if="mIdx==1" ref="two" :data="data" />
    <three v-else-if="mIdx==2" ref="three" :data="data"/>
    <div class="drawer-bootom-button" style="z-index:1">
        <div style="float:right">
          <template v-if="mIdx==0">
            <a-button type="primary" @click="handleSave" >保存分组并进行下一步操作</a-button>
          </template>
          <template v-else-if="mIdx==1">
            <a-button type="primary" @click="mIdx=0" >上一步</a-button>
            <!-- <a-button type="primary" @click="handleSaveStudent" >保存</a-button> -->
            <a-button type="primary" @click="handleSaveStudent" >下一步</a-button>
          </template>
          <template v-else-if="mIdx==2">
             <a-button type="primary" @click="mIdx=0" >上一步</a-button>
             <a-button type="primary" @click="handleSaveMember" >提交</a-button>
          </template>
          <a-button type="primary" @click="handleCancel">关闭窗口</a-button>
        </div>
    </div>
  </a-drawer>
</template>

<script>
import one from './groupInfo/one.vue'
import two from './groupInfo/two.vue'
import three from './groupInfo/three.vue'

export default {
  props: {
    editVisible: {
      default: false
    },
    data:{
      default:function(){
        return {}
      }
    }
  },
  components: {
    one,
    two,
    three
  },
  data () {
    return {
      mIdx:0,
    }
  },
  created () {
  },
  methods: {
    // 关闭
    handleCancel () {
      this.$emit("close");
    },
    // 保存第一步修改修改
    handleSave () {
      this.$refs.one.form.validateFields(
        (err,values) => {
          if (!err) {
            let params = Object.assign({},this.data,values,{
              dbrq:values.dbrq.format('YYYY-MM-DD')
            })
            this.$api.degree.pleaGroupSet(params).then(res=>{
              this.mIdx =2;
            })
          }
        },
      );
    },
    //保存第二步修改
    handleSaveStudent(){
      let studentList = this.$refs.two.checkedStudent;
      this.$api.degree.pleaGroupSetStudent(studentList).then(res=>{
        this.$message.success('保存成功');
        this.mIdx=2;
      })
    },
    //保存第三步
    handleSaveMember(){
      let param = this.$refs.three.memberData;
      if (param.length%2==0) {
        this.$message.warn("委员数量必须为奇数");
        return;
      }
      this.$api.degree.pleaGroupSetMember(param).then(res=>{
        this.$message.success('提交成功');
      })
    }
  }
}
</script>

<style lang="less">
.fullscreen{
    .ant-drawer-wrapper-body{
        height: 100%;
        overflow: auto;
    }
}
</style>
